<template>
  <div>
    <h1>发布</h1>
    {{list}}
    <div> <el-button type="primary" @click="project">按项目计费</el-button>
  <el-button type="success" @click="times">按时间计费</el-button></div>

<el-form ref="form" :model="form" label-width="80px" v-show="isshow">
  <el-form-item label="标题">
       <el-input v-model="form.title"></el-input>
  </el-form-item>
    <el-form-item label="描述">
    <el-input v-model="form.descs"></el-input>
  </el-form-item>
     <el-form-item label="人才" v-show="flag">

  <el-tabs :tab-position="tabPosition" style="height: 200px;">
    <el-tab-pane :label="i.name" v-for="(i,j) in list" :key="j">
        <div v-for="(x,p) in i.son" :key="p">{{x.name}} <div v-for="(o,y) in x.son" :key="y"><el-button @click="qi(i.name,x.name,o.name)">{{o.name}}</el-button></div>  </div>
    </el-tab-pane>
  </el-tabs>

  </el-form-item>
    <el-form-item label="需求类型">
    <el-input v-model="form.type" ></el-input>
    <el-button @click="bb">点击</el-button>
  </el-form-item>

    <el-form-item label="需求预算">
    <el-input v-model="form.money" ></el-input>
  </el-form-item>
     <el-form-item label="电话号码">
    <el-input v-model="form.mobile" ></el-input>
  </el-form-item>
   <el-form-item label="行业">
    <el-input v-model="form.trade" ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

<el-form ref="form" :model="form" label-width="80px" v-show="noshow">
  <el-form-item label="标题">
       <el-input v-model="form.title"></el-input>
  </el-form-item>
    <el-form-item label="描述">
    <el-input v-model="form.descs"></el-input>
  </el-form-item>
     <el-form-item label="人才" v-show="flag">

  <el-tabs :tab-position="tabPosition" style="height: 200px;">
    <el-tab-pane :label="i.name" v-for="(i,j) in list" :key="j">
        <div v-for="(x,p) in i.son" :key="p">{{x.name}} <div v-for="(o,y) in x.son" :key="y"><el-button @click="qi(i.name,x.name,o.name)">{{o.name}}</el-button></div>  </div>
    </el-tab-pane>
  </el-tabs>

  </el-form-item>
    <el-form-item label="需求类型">
    <el-input v-model="form.type" ></el-input>
    <el-button @click="bb">点击</el-button>
  </el-form-item>

    <el-form-item label="雇佣时长">
    <el-input v-model="form.hire" ></el-input>
  </el-form-item>
     <el-form-item label="日均工时">
    <el-input v-model="form.daily" ></el-input>
  </el-form-item>
    <el-form-item label="金额">
    <el-input v-model="form.money" ></el-input>
  </el-form-item>
     <el-form-item label="电话号码">
    <el-input v-model="form.mobile" ></el-input>
  </el-form-item>
   <el-form-item label="行业">
    <el-input v-model="form.trade" ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

  </div>
</template>

<script>
export default {
    data(){
        return{
            form:{
                name:'',
                title:'',
                descs:'',
                type:'',
                money:'',
                mobile:'',
                trade:'',
                hire:'',
                daily:'',
                userid:localStorage.getItem('userid')
            },
            tabPosition: 'left',
            list:[],
            flag:false,
            isshow:true,
            noshow:false
        }
    },
    methods:{
        gettypes(){
            this.axios.get('/gettypes')
            .then(res=>{
                this.list = res.data.list
                
            })
        },
        qi(x,y,z){
            this.form.type = x+y+z
            this.flag = false
        },
        bb(){
            this.flag = true

        },
        project(){
            this.form.name ='按项目付费'
            this.isshow = true
            this.noshow = false

        },
        times(){
            this.form.name='按时收费'
            this.isshow = false
            this.noshow = true
        },
        onSubmit(){
            this.axios.post('/getproject',this.form)
            .then(res=>{
            alert(res.data.msg)
            })
        }
    },
    mounted(){
        this.gettypes()

    }

}
</script>

<style>

</style>